<template>
  <transition>
    <div class="minerank" @click='ggg'>
      <div class="back" @click='goBack'>
        <i class="icon-back"></i>
        <span class="title">{{title}}</span>
      </div>
      <rank-list :ranklist="loveRank" class='rank-list'></rank-list>
      <no-result v-show="loveRank.length == 0" class="noResult"></no-result>
    </div>
  </transition>
</template>
<script>
import { mapState } from 'vuex'
import NoResult from '../../components/result/NoResult'
import RankList from '../rank/RankList'
export default {
  components: {
    RankList,
    NoResult
  },
  data() {
    return {
      title: '我的榜单'
    }
  },
  methods: {
    goBack() {
      console.log(66666666666666)
      this.$router.back()
    },
    ggg() {
      console.log(5555555555)
    }
  },
  computed: {
    ...mapState({
      loveRank: 'loveRank'
    })
  }
}
</script>
<style lang="stylus" scoped>
.minerank {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: #222;

  .back {
    height: 44px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    span {
      display: inline-block;
      width: 300px;
      text-align: center;
      color: #fff;
      font-size: 16px;
    }
  }

  .rank-list {
    top: 44px;
  }
}
</style>